<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书展示</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <style>
        @font-face {
            font-family: "newfont";
            src: url(../font/潮字社穿云箭简繁-闪\(CHAO-CloudGBT-Flash\).ttf);
        }

        @font-face {
            font-family: "newfont2";
            src: url(../font/潮字社破风刀简繁-闪\(CHAO-WindGBT-Flash\).ttf);
        }

        a {
            text-decoration: none;
            text-align: center;
            color: black;
            margin: 0;
            padding: 0;
        }

        a:hover {
            background-color: bisque;
            color: red;
        }

        .container {
            height: 1000px;
            width: auto;
        }

        .head {
            width: auto;
            height: 50px;
            text-align: center;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: aquamarine;
        }

        .navbar {
            background-color: #333;
            position: fixed;
            top: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            padding: 10px;
            z-index: 999;
        }

        .navbar a {
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            font-family: "newfont", sans-serif;
        }

        .navbar a:hover {
            background-color: antiquewhite;
            color: black;
        }

        .content {

            padding-top: 76px;
        }

        .a1 {
            height: 650px;

            border-radius: 20px;
            background-color: aquamarine;

        }

        .a2 {}

        img {
            max-width: 100%;
            overflow: hidden;
        }

        h1 {
            font-style: italic;
            font-style: oblique;
        }

        .slider {
            width: 600px;
            height: 400px;
            overflow: hidden;
            margin: auto;
            padding: auto;
        }

        .slider-wrapper {
            width: 1800px;
            height: 400px;
            display: flex;
            transition: transform 1s ease;
        }

        .slider-wrapper img {
            width: 600px;
            height: 400px;
        }
    </style>


</head>
<div>

    <div class="navbar">
        <a href="#home">首页</a>
        <a href="#about">关于我们</a>
        <a href="#services">服务</a>
        <a href="#contact">内容</a>
    </div>
    <div class="content">
        <h1 id="home">传统文化</h1>
        <hr>
        <p>传统文化（Traditional
            culture）是文明演化而汇集成的一种反映民族特质和风貌的文化，是各民族历史上各种思想文化、观念形态的总体表现。其内容当为历代存在过的种种物质的、制度的和精神的文化实体和文化意识。它是对应于当代文化和外来文化的一种统称。世界各国、各民族都有自己的传统文化。
        </p>
        <!-- Add more content here to make the page scrollable -->
        <hr>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-3 a1">
                <h1>文化含义
                    <hr>
                </h1>
                <div class="row">
                    <div class="col-12 a2">
                        文化（culture）本身是一个比较大的概念。笼统地说，文化是一种社会现象，是人们长期创造形成的产物。同时又是一种历史现象，是社会历史的积淀物。广义的文化是人类创造出来的所有物质和精神财富的总和.
                    </div>
              
                </div>

            </div>
            <div class="col-6 a1">
                <h1>文化内容</h1>
                <hr>
                <div class="slider" id="contact">
                    <div class="slider-wrapper">
                      <a href="patings.html"> <img src="image1.jpg"></a> 
                        <a href="tea.html"><img src="image2.jpg"></a>
                       
                    </div>
                </div>
            </div>
            <div class="col-3 a1">
                <h1>文化核心价值
                    <hr>
                </h1>
                <div class="row">
                    <div class="col-12 a2">
                        核心价值或基本理念层面，主要是指一个文化体系最终“为了谁、为了什么”的定位与导向。它处于文化体系最深层内核的位置，向外展现为制度和规范体系的制定，并经过长期反复的实践，最终落实为一定的风俗习惯。
                    </div>
                </div>
            </div>
        </div>
        <hr>
    </div>
</div>
</div>

</body>
<script>
    function slider() {
        var wrapper = document.querySelector('.slider-wrapper');
        var images = document.querySelectorAll('.slider-wrapper img');
        var width = images[0].width;
        var count = images.length;
        var currentIndex = 0;
        setInterval(function () {
            currentIndex = (currentIndex + 1) % count;
            wrapper.style.transform = 'translateX(-' + width * currentIndex + 'px)';
        }, 2000);
    }
    slider();

</script>

</html>